<template>
  <div class="hello" @click.right="deskClick" @click="deskClick2">
    <button @click="btnChange">改</button>
    <button @click="btnAdd">增</button>
    <button @click="btnRemove">删</button>
    <Time :appList="appList"> <div>123</div></Time>
    <SearchBox></SearchBox>
    <div class="app-container">
      <AppContainer
        :app-list="appList"
        @edit-event="handleEditEvent"
        ref="appContainerRef"
      ></AppContainer>
    </div>
    <div class="hidden">
      <div
        class="card"
        :style="{
          position: 'absolute',
          left: curPos.posX + 'px',
          top: curPos.posY + 'px',
        }"
      >
        <AppCard v-if="isShowApp" @clickEvent="handleAppClick"></AppCard>
        <DeskCard v-if="isShowDesk" @clickEvent="handleDeskClick"></DeskCard>
      </div>
      <DialogEdit
        v-if="showAppMenu.isEdit"
        :is-show="showAppMenu.isEdit"
        :form-data="curApp"
        @v-show="showAppMenu.isEdit = false"
        @submitEvent="updateApp"
      ></DialogEdit>
      <DialogAdd
        v-if="deskMenu.isAddApp"
        :is-show="deskMenu.isAddApp"
        @v-show="changeVShow"
      ></DialogAdd>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { computed, onMounted, reactive, ref } from 'vue'
import SearchBox from './SearchBox.vue'
import DialogEdit from './cpns/dialog/DialogEdit.vue'
import AppContainer from './AppContainer.vue'
import Time from './cpns/time/Time.vue'
import AppCard from './cpns/card/AppCard.vue'
import DeskCard from './cpns/card/DeskCard.vue'
import DialogAdd from './cpns/dialog/DialogAdd.vue'
import store from '../store'
const appList = ref([
  {
    id: 1,
    webName: '知乎',
    icon: 'https://files.codelife.cc/website/zhihu.svg',
    webUrl: 'www.zhihu.com',
  },
  {
    id: 2,
    webName: '哔哩哔哩',
    icon: 'https://files.codelife.cc/website/bilibili2.svg',
    webUrl: 'www.bilibili.com',
  },
  {
    id: 3,
    webName: '掘金',
    icon: 'https://files.codelife.cc/website/juejin.svg',
    webUrl: 'www.juejin.com',
  },
  {
    id: 4,
    webName: '新浪微博',
    icon: 'https://files.codelife.cc/website/weibo.svg',
    webUrl: 'www.webo.com',
  },
  {
    id: 5,
    webName: '爱奇艺',
    icon: 'https://files.codelife.cc/website/iqiyi.svg',
    webUrl: 'www.aiqiyi.com',
  },
  {
    id: 6,
    webName: '网易云音乐',
    icon: 'https://files.codelife.cc/website/music163.svg',
    webUrl: 'music.163.com/',
  },
  {
    id: 7,
    webName: '优酷',
    icon: 'https://files.codelife.cc/website/youku.svg',
    webUrl: 'www.youku.com',
  },
])

const btnChange = () => {
  store.appList[0].webName = '心智' + index
  index++
}
const btnAdd = () => {
  store.addApp()
}
const btnRemove = () => {
  store.appList.pop()
}

const div = ref(null)
const time = ref(null)
const appContainerRef = ref(null)
let changDataList = null
onMounted(() => {
  if (appContainerRef.value) {
    changDataList = appContainerRef.value.changDataList
  }
})

const curPos = ref({ posX: 0, posY: 0 })
const isShowApp = ref(false)
const isShowDesk = ref(false)
const curApp = ref<{ id: 0; webName: String; webUrl: String }>({
  id: 0,
  webName: 'more',
  webUrl: '',
})

const handleEditEvent = (pos: any, appitem: any) => {
  isShowApp.value = true
  isShowDesk.value = false
  curPos.value.posX = pos.posX
  curPos.value.posY = pos.posY

  curApp.value = appitem
  console.log('正在操作', curApp.value.webName, curApp.value.id)
}

// 两个鼠标事件:APP和桌面，右键 和 左键
const deskClick = (e: any) => {
  // console.log('桌面点击了', e.preventDefault)
  e.preventDefault()
  isShowApp.value = false
  isShowDesk.value = true
  // console.log('显示桌面右键')
  curPos.value.posX = e.pageX
  curPos.value.posY = e.pageY
}
const deskClick2 = () => {
  isShowDesk.value = false
  isShowApp.value = false
}
// App鼠标菜单事件处理
const showAppMenu = reactive({
  isEdit: false,
  isAdd: false,
})

const updateApp = (appInfo: any) => {
  let newList = []
  appList.value.forEach((item) => {
    if (item.order == curApp.value.order) {
      item.webName = appInfo.webName
      item.webUrl = appInfo.Url
    }
    newList.push(item)
  })
  appList.value = newList

  console.log('编辑后的appList', appList.value)
}
const handleAppClick = (info: any) => {
  // console.log('app弹出菜单', info)
  if (info.item === '编辑') {
    showAppMenu.isEdit = true
    console.log('编辑此app', curApp.value)
  } else if (info.item === '删除') {
    console.log('正在删除', curApp.value)
    store.removeApp(curApp.value)
    console.log('删除后的list', appList.value)
  }
}
//  desk 鼠标菜单事件
const deskMenu = reactive({
  isAddApp: false,
  isAddGroup: false,
})
const handleDeskClick = (info: any) => {
  if (info.item === '添加图标') {
    console.log('添加图标')
    // showAppMenu.isAdd = true
    deskMenu.isAddApp = true
  } else if (info.item === '创建分组') {
    store.addGroup()
  }
}

const changeVShow = (val: any) => {
  // 实现跨组件双向绑定
  // console.log('changevshow', val)
  // showAppMenu.isEdit = val
  console.log('状态改变', val)

  deskMenu.isAddApp = val
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.app-container {
  width: 80%;
  height: 100%;
  border: 1px dashed;
  margin: 0 auto;
}

h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
